<template>
    <div :class="'bg-sakura' + pageIndex" style="width:100%;height:100vh">
        <div class="centre">
            <div id="centreImg">
                <clock :time="time" :border="'none'"
                    :bg="'radial-gradient(circle, rgb(236,255,229,0.7), rgb(255,251,225,0.7), rgb(255,165,0,0.7))'"></clock>
            </div>
            <div id="centreText">
                <div id="englishText">{{ englishText }}</div>
                <div id="chineseText">{{ chineseText }}</div>
                <div id="timeText">{{ timeText }}</div>
            </div>
        </div>
        <div id="foot">
            <a-icon type="caret-down" />
        </div>
    </div>
</template>
<script>
import Clock from 'vue-clock2'
import { everyday } from '@api/homeApi'
export default {
    components: { Clock },
    data() {
        return {
            pageIndex: 1,
            time: '12:00',
            englishText: '',
            chineseText: '',
            timeText: '',
        }
    },
    created() {
        this.pageIndex = this.done(1, 4)
    },
    mounted() {
        window.setInterval(() => {
            setTimeout(this.fun, 0)
        }, 1000)
        //每日英语
        this.everyday()
        //底部跳动图标
        window.setInterval(() => {
            this.footDone()
        }, 2000)
    },
    methods: {
        //随机数字
        done(len, max) {
            var arr = []
            var result = ''
            var count = 0
            while (count < len) {
                var n = Math.floor(Math.random() * max + 1)
                if (arr.join().indexOf(n) == -1) {
                    arr.push(n)
                    count++
                }
            }
            for (let index = 0; index < arr.length; index++) {
                result = result + arr[index]
            }
            return result
        },
        //底部按钮跳动
        footDone() {
            document
                .getElementById('foot')
                .setAttribute(
                    'style',
                    'top: 91%;'
                )
            setTimeout(function () {
                document.getElementById('foot').setAttribute('style', 'top: 90%')
            }, 1000)
        },
        //每日英语
        everyday() {
            everyday().then((res) => {
                this.englishText = res.result.result.content
                this.chineseText = res.result.result.note
                this.timeText = res.result.result.date
            })
        },


        //时钟
        fun() {
            let date = new Date()
            let h = date.getHours()
            h = h < 10 ? '0' + h : h
            let m = date.getMinutes()
            m = m < 10 ? '0' + m : m
            let s = date.getSeconds()
            s = s < 10 ? '0' + s : s
            this.time = h + ':' + m + ':' + s
        },
    }
}
</script>
<style scoped>
.bg-sakura1 {
    background-image: url('../../../assets/image/home/bg1.jpg');
    background-size: 100%;
}

.bg-sakura2 {
    background-image: url('../../../assets/image/home/bg2.png');
    background-size: 100%;
}

.bg-sakura3 {
    background-image: url('../../../assets/image/home/bg3.jpg');
    background-size: 100%;
}

.bg-sakura4 {
    background-image: url('../../../assets/image/home/bg4.jpg');
    background-size: 100%;
}

.centre {
    position: absolute;
    max-width: 800px;
    min-width: 800px;
    padding: 0 10px;
    top: 30%;
    left: 29%;
    height: 300px;
}


#centreImg {
    margin: 0px auto;
    width: 140px;
    height: 140px;
}

#centreText {
    margin: 0px auto;
    width: 86%;
    height: 105px;
    background-color: rgb(255, 255, 255, 0.8);
    margin-top: 40px;
    border-radius: 22px;
    line-height: 30px;
    padding: 10px 0px;
    font-size: 18px;
    font-family: cursive;
    color: #b87903;
}

#englishText {
    font-weight: 800;
    text-align: center;
    font-style: italic;
}

#chineseText {
    text-align: center;
    text-indent: 2em
}

#timeText {
    text-align: right;
    padding-right: 50px;
}

#foot {
    position: absolute;
    top: 90%;
    left: 50%;
    font-size: 30px;
    color: rgb(255, 255, 255, 0.8);
    -webkit-transition: all 1s ease !important;
    transition: all 1s ease !important;
}
</style>